<!-- Wrapper-->
<div id="wrapper">

<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>

<!-- Page wraper -->
<!-- ng-class with current state name give you the ability to extended customization your view -->
<div id="page-wrapper" class="gray-bg {{$state.current.name}}">

<!-- Page wrapper -->
<div ng-include="'views/common/topnavbar.html'"></div>

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-9">
        <h2>Widgets</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li class="active">
                <strong>Widgets</strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
    <div class="col-lg-3">
        <div class="widget style1">
            <div class="row">
                <div class="col-xs-4 text-center">
                    <i class="fa fa-trophy fa-5x"></i>
                </div>
                <div class="col-xs-8 text-right">
                    <span> Today income </span>

                    <h2 class="font-bold">$ 4,232</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="widget style1 navy-bg">
            <div class="row">
                <div class="col-xs-4">
                    <i class="fa fa-cloud fa-5x"></i>
                </div>
                <div class="col-xs-8 text-right">
                    <span> Today degrees </span>

                    <h2 class="font-bold">26'C</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="widget style1 lazur-bg">
            <div class="row">
                <div class="col-xs-4">
                    <i class="fa fa-envelope-o fa-5x"></i>
                </div>
                <div class="col-xs-8 text-right">
                    <span> New messages </span>

                    <h2 class="font-bold">260</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="widget style1 yellow-bg">
            <div class="row">
                <div class="col-xs-4">
                    <i class="fa fa-music fa-5x"></i>
                </div>
                <div class="col-xs-8 text-right">
                    <span> New albums </span>

                    <h2 class="font-bold">12</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" ng-controller="widgetFlotChart as chart">
    <div class="col-lg-6">
        <div class="widget navy-bg no-padding">
            <div class="p-m">
                <h1 class="m-xs">$ 1,540</h1>

                <h3 class="font-bold no-margins">
                    Annual income
                </h3>
                <small>Income form project Alpha.</small>
            </div>
            <div class="flot-chart">
                <div flot class="flot-chart-content" dataset="chart.flotChartData1" options="chart.flotChartOptions1"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="widget lazur-bg no-padding">
            <div class="p-m">
                <h1 class="m-xs">$ 210,660</h1>

                <h3 class="font-bold no-margins">
                    Monthly income
                </h3>
                <small>Income form project Beta.</small>
            </div>
            <div class="flot-chart">
                <div flot class="flot-chart-content" dataset="chart.flotChartData2" options="chart.flotChartOptions2"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="widget yellw-bg no-padding">
            <div class="p-m">
                <h1 class="m-xs">$ 50,992</h1>

                <h3 class="font-bold no-margins">
                    Half-year revenue margin
                </h3>
                <small>Sales marketing.</small>
            </div>
            <div class="flot-chart">
                <div flot class="flot-chart-content" dataset="chart.flotChartData3" options="chart.flotChartOptions3"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-2">
        <div class="widget style1 navy-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-user fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">217</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget style1 navy-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-thumbs-up fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">400</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget style1 navy-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-rss fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">10</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget style1 lazur-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-phone fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">120</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget style1 lazur-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-euro fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">462</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget style1 yellow-bg">
            <div class="row vertical-align">
                <div class="col-xs-3">
                    <i class="fa fa-shield fa-3x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <h2 class="font-bold">610</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="widget-head-color-box navy-bg p-lg text-center">
            <div class="m-b-md">
                <h2 class="font-bold no-margins">
                    Alex Smith
                </h2>
                <small>Founder of Groupeq</small>
            </div>
            <img src="img/a4.jpg" class="img-circle circle-border m-b-md" alt="profile">

            <div>
                <span>100 Tweets</span> |
                <span>350 Following</span> |
                <span>610 Followers</span>
            </div>
        </div>
        <div class="widget-text-box">
            <h4 class="media-heading">Alex Smith</h4>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

            <div class="text-right">
                <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i> Like </a>
                <a class="btn btn-xs btn-primary"><i class="fa fa-heart"></i> Love</a>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget navy-bg p-lg text-center">
            <div class="m-b-md">
                <i class="fa fa-shield fa-4x"></i>

                <h1 class="m-xs">456</h1>

                <h3 class="font-bold no-margins">
                    Shield
                </h3>
                <small>power</small>
            </div>
        </div>
        <div class="widget  p-lg text-center">
            <div class="m-b-md">
                <i class="fa fa-flash fa-4x"></i>

                <h1 class="m-xs">612</h1>

                <h3 class="font-bold no-margins">
                    Thunder
                </h3>
                <small>amount</small>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="widget lazur-bg p-xl">

            <h2>
                Janet Smith
            </h2>
            <ul class="list-unstyled m-t-md">
                <li>
                    <span class="fa fa-envelope m-r-xs"></span>
                    <label>Email:</label>
                    mike@mail.com
                </li>
                <li>
                    <span class="fa fa-home m-r-xs"></span>
                    <label>Address:</label>
                    Street 200, Avenue 10
                </li>
                <li>
                    <span class="fa fa-phone m-r-xs"></span>
                    <label>Contact:</label>
                    (+121) 678 3462
                </li>
            </ul>

        </div>
        <div class="widget red-bg p-lg text-center">
            <div class="m-b-md">
                <i class="fa fa-bell fa-4x"></i>

                <h1 class="m-xs">47</h1>

                <h3 class="font-bold no-margins">
                    Notification
                </h3>
                <small>We detect the error.</small>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="widget yellow-bg p-lg text-center">
            <div class="m-b-md">
                <i class="fa fa-thumbs-up fa-4x"></i>

                <h1 class="m-xs">520</h1>

                <h3 class="font-bold no-margins">
                    Likes
                </h3>
                <small>amount</small>
            </div>
        </div>
        <div class="widget yellow-bg p-lg text-center">
            <div class="m-b-md">
                <i class="fa fa-warning fa-4x"></i>

                <h1 class="m-xs">Alarm</h1>

                <h3 class="font-bold no-margins">
                    Do
                </h3>
                <small>something</small>
            </div>
        </div>
    </div>
</div>
<div class="row m-t-lg">
    <div class="col-lg-6">
        <div class="ibox float-e-margins">

            <div class="ibox-content">

                <div>
                    <div class="chat-activity-list">

                        <div class="chat-element">
                            <a href="" class="pull-left">
                                <img alt="image" class="img-circle" src="img/a2.jpg">
                            </a>

                            <div class="media-body ">
                                <small class="pull-right text-navy">1m ago</small>
                                <strong>Mike Smith</strong>

                                <p class="m-b-xs">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                </p>
                                <small class="text-muted">Today 4:21 pm - 12.06.2014</small>
                            </div>
                        </div>

                        <div class="chat-element right">
                            <a href="" class="pull-right">
                                <img alt="image" class="img-circle" src="img/a4.jpg">
                            </a>

                            <div class="media-body text-right ">
                                <small class="pull-left">5m ago</small>
                                <strong>John Smith</strong>

                                <p class="m-b-xs">
                                    Lorem Ipsum is simply dummy text of the printing.
                                </p>
                                <small class="text-muted">Today 4:21 pm - 12.06.2014</small>
                            </div>
                        </div>

                        <div class="chat-element ">
                            <a href="" class="pull-left">
                                <img alt="image" class="img-circle" src="img/a2.jpg">
                            </a>

                            <div class="media-body ">
                                <small class="pull-right">2h ago</small>
                                <strong>Mike Smith</strong>

                                <p class="m-b-xs">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                </p>
                                <small class="text-muted">Today 4:21 pm - 12.06.2014</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-form">
                    <form role="form">
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Message"></textarea>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-sm btn-primary m-t-n-xs"><strong>Send message</strong></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div>
            <table class="table">
                <tbody>
                <tr>
                    <td>
                        <button type="button" class="btn btn-danger m-r-sm">12</button>
                        Total messages
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary m-r-sm">28</button>
                        Posts
                    </td>
                    <td>
                        <button type="button" class="btn btn-info m-r-sm">15</button>
                        Comments
                    </td>
                </tr>
                <tr>
                    <td>
                        <button type="button" class="btn btn-info m-r-sm">20</button>
                        News
                    </td>
                    <td>
                        <button type="button" class="btn btn-success m-r-sm">40</button>
                        Likes
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger m-r-sm">30</button>
                        Notifications
                    </td>
                </tr>
                <tr>
                    <td>
                        <button type="button" class="btn btn-warning m-r-sm">20</button>
                        Albums
                    </td>
                    <td>
                        <button type="button" class="btn btn-default m-r-sm">40</button>
                        Groups
                    </td>
                    <td>
                        <button type="button" class="btn btn-warning m-r-sm">30</button>
                        Permissions
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div>
            <div class="row">
                <div class="col-md-6">
                    <div class="ibox-content text-center">
                        <h1>Nicki Smith</h1>

                        <div class="m-b-sm">
                            <img alt="image" class="img-circle" src="img/a8.jpg">
                        </div>
                        <p class="font-bold">Consectetur adipisicing</p>

                        <div class="text-center">
                            <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i> Like </a>
                            <a class="btn btn-xs btn-primary"><i class="fa fa-heart"></i> Love</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ibox-content">
                        <div>
                            <div>
                                <span>Memory</span>
                                <small class="pull-right">10/200 GB</small>
                            </div>
                            <div class="progress progress-small">
                                <div style="width: 60%;" class="progress-bar"></div>
                            </div>

                            <div>
                                <span>Bandwidth</span>
                                <small class="pull-right">20 GB</small>
                            </div>
                            <div class="progress progress-small">
                                <div style="width: 50%;" class="progress-bar"></div>
                            </div>

                            <div>
                                <span>Activity</span>
                                <small class="pull-right">73%</small>
                            </div>
                            <div class="progress progress-small">
                                <div style="width: 40%;" class="progress-bar"></div>
                            </div>

                            <div>
                                <span>FTP</span>
                                <small class="pull-right">400 GB</small>
                            </div>
                            <div class="progress progress-small">
                                <div style="width: 20%;" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <div class="ibox-content">
            <h2>TODO List</h2>
            <small>This is example of task list</small>
            <ul class="todo-list m-t">
                <li>
                    <input icheck type="checkbox" ng-model="check1">
                    <span class="m-l-xs">Buy a milk</span>
                    <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 mins</small>
                </li>
                <li>
                    <input icheck type="checkbox" ng-model="main.checkOne">
                    <span class="m-l-xs">Go to shop and find some products.</span>
                    <small class="label label-info"><i class="fa fa-clock-o"></i> 3 mins</small>
                </li>
                <li>
                    <input icheck type="checkbox" ng-model="check2">
                    <span class="m-l-xs">Send documents to Mike</span>
                    <small class="label label-warning"><i class="fa fa-clock-o"></i> 2 mins</small>
                </li>
                <li>
                    <input icheck type="checkbox" ng-model="check3">
                    <span class="m-l-xs">Go to the doctor dr Smith</span>
                    <small class="label label-danger"><i class="fa fa-clock-o"></i> 42 mins</small>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <h2>TODO Small version</h2>
                <small>This is example of small version of todo list</small>
                <ul class="todo-list m-t small-list">
                    <li>
                        <checkbox ng-model="main.checkThree"></checkbox>
                        <span class="m-l-xs">Buy a milk</span>
                    </li>
                    <li>
                        <checkbox ng-model="check4"></checkbox>
                        <span class="m-l-xs">Go to shop and find some products.</span>

                    </li>
                    <li>
                        <checkbox ng-model="check5"></checkbox>
                        <span class="m-l-xs">Send documents to Mike</span>
                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 mins</small>
                    </li>
                    <li>
                        <checkbox ng-model="main.checkFour"></checkbox>
                        <span class="m-l-xs">Go to the doctor dr Smith</span>
                    </li>
                    <li>
                        <checkbox ng-model="check6"></checkbox>
                        <span class="m-l-xs">Plan vacation</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row m-t-lg">
    <div class="col-lg-12">
        <div class="ibox-content">
            <h2>Word map</h2>
            <small>This is simple example of map</small>
            <div ng-controller="dashboardMap as map">
                <div vector-map style="height: 300px;" my-map-data="map.data"></div>
            </div>
        </div>
    </div>

</div>

</div>

<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>

</div>
<!-- End page wrapper-->

</div>
<!-- End wrapper-->